<template>
	<view class="inputer">
		<view :class="{ 'input_box': true, 'top': titlePosition === 'top', 'left': titlePosition === 'left', 'header-top': props.clasName }">
			<icon :type="prefixIcon" size="16" color="#B8BDC3" />
			<input @input="change" class="uni-input" :placeholder="placeholder" :value='data'/>
			<icon :type="affixIcon" />
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue"
const props = defineProps({
	data: String,
	placeholder: String,
	title: String,
	titlePosition: {
		type: String,
		default: 'top'
	},
	prefixIcon: String,
	affixIcon: String,
	clasName: String
});
const emits = defineEmits(["data"]);
const change=(value)=>{
	console.log(value.detail,value.detail.value);
	emits('update:data', value.detail.value)
}
</script>

<style lang="sass" scoped>
.header-top
	margin-bottom: 15rpx
	margin-top: 4rpx
	padding-left: 10rpx
	icon
		margin-left: 20rpx
.inputer
	width: 100%
	display: flex
	&.top
		flex-direction: column
	.input_box
		background: #F4F6FA
		display: flex
		height: 76rpx
		flex: 1
		align-items: center
		font-size: 30rpx
		color: #B8BDC3
		border-radius: 38rpx
		input
			height: 100%
			background: #f5f5f5
			padding: 0
	:deep(uni-icon)
		margin-right: 12rpx
		margin-left: 30rpx
		
:deep(.uni-input-placeholder)
	font-size: 28rpx
	color: #B8BDC3
	font-weight: 500
	line-height: 65rpx
</style>
